<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"  th:href="@{/css/back-index.css}"/>
    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script src="/layui/layui.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .width120 {
            max-width: 120px;
            word-break:break-all;
        }
        .width90 {
            max-width: 90px;
            word-break:break-all;
        }
        .width50 {
            max-width: 50px;
            word-break:break-all;
        }

    </style>
    <script>
        function fileUpload(item){
            $(item).click();
        }
        function fileChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }

        function modifyStatus(resourceId) {
            $.ajax({
                type: "post",
                url: "/backResource/modifyStatus",
                data:{"resourceId":resourceId},
                success: function (response) {
                    if (response.status==1){
                        location.href="/backResource/showResources?courseId="+[[${courseId}]]+"&chapterId="+[[${chapterId}]];
                    }
                }
            })
        }
        function selectResource(id) {
            $.ajax({
                type: "post",
                url: "/backResource/selectResource",
                data:{"id":id},
                success: function (response) {
                    if (response.status==1){

                        $("#courseId").val(response.object.courseId);
                        $("#course-resource-id").val(response.object.chapterId);
                        $("#course-resource-file-title").val(response.object.title);
                        $("#file-cost-type").val(response.object.costType);
                        $("#file-cost-type-val").val(response.object.costNumber);
                        $("#resource-type-id").val(response.object.fileType);
                        $("#resourceId").val(response.object.id);
                        $(".modal-title").html("修改资源");
                        $("#courseReourceModal").modal("show");
                        $("#add-resource-true2").hide();
                        $("#modify-resource-true2").show();
                    }
                    else{
                        alert(response.message)
                    }
                }

            })
        }

        function modifyResourceTrue() {
            let formData=new FormData($("#myForm")[0]);
            $.ajax({
                type:"post",
                url:"/backResource/modifyResource",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {

                    if (response.status==1){
                        alert(response.message)
                        location.href="/backResource/showResources?courseId="+$("#courseId").val()+"&chapterId="+$("#course-resource-id").val();
                    }
                    else{
                        alert("系统异常！")
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="show-list" >
    <table class="table table-bordered table-hover" style="text-align: center;">
        <thead>
        <tr class="text-danger">
            <th class="text-center width50">编号</th>
            <th class="text-center">资源标题</th>
            <th class="text-center width50">资源相对路径</th>
            <th class="text-center">文件原始名称</th>
            <th class="text-center width50">文件大小</th>
            <th class="text-center width50">文件类型</th>
            <th class="text-center width90">上传时间</th>
            <th class="text-center width50">消费类型</th>
            <th class="text-center width50">消费值</th>
            <th class="text-center width50">上传用户</th>
            <th class="text-center width50">状态</th>
            <th class="text-center width120">操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr th:each="resourceVo:${resourcesVo}">
            <td th:text="${resourceVo.id}"></td>
            <td th:text="${resourceVo.title}"></td>
            <td th:text="${resourceVo.path}" class="width120"></td>
            <td th:text="${resourceVo.originalName}" class="width120"></td>
            <td th:text="${resourceVo.fileSize}"></td>
            <td th:text="${resourceVo.fileType}==1?'mp4':'pdf'"></td>
            <td th:text="${resourceVo.createDate}"></td>
            <td th:text="${resourceVo.costType}"></td>
            <td th:text="${resourceVo.costNumber}"></td>
            <td th:text="${resourceVo.userName}"></td>
            <td th:text="${resourceVo.status}==1?'启用':'禁用'"></td>
            <td class="text-center">
                <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改">
                <input type="button" th:class="${resourceVo.status}==1?'btn btn-danger btn-sm':'btn btn-success btn-sm'"
                       th:value="${resourceVo.status}==1?'禁用':'启用'"
                       th:onclick="|javascript:modifyStatus('${resourceVo.id}')|"/>
                <input type="button" class="btn btn-success btn-sm resource-detail" value="详情" />
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>